<template>
  <div class="lyx_big">
    <header>
      <img src="./img/sousuo.png" alt="" />
      <input type="text" placeholder="搜索商品" />
    </header>
    <main>
      <ul class="lyx_diyigeul">
        <li
          v-for="(i, item) in lyx_arrfenlei"
          :key="item"
          @click="qiehuan1(item)"
          :class="{ yanse: item == lyx_diji }"
        >
          {{ i.title }}
        </li>
      </ul>
      <ul class="lyx_diergeul">
        <li
          v-for="(i, item) in lyx_arr"
          :key="item"
          v-if="i.isUse == lyx_leixing"
        >
          <img :src="i.icon" alt="" />
          <span>{{ i.name }}</span>
        </li>

        <li
          v-for="(i, item) in lyx_arr"
          :key="item"
          v-if="i.type == lyx_leixing"
        >
          <img :src="i.icon" alt="" />
          <span>{{ i.name }}</span>
        </li>
      </ul>
    </main>
    <footer>
      <router-link
        tag="span"
        to="/Info"
        v-for="(i, item) in lyx_arrweibu"
        :key="item"
        >{{ i.title }}</router-link
      >
    </footer>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      lyx_arr: "",
      lyx_diji: 0,
      lyx_level: 2,
      lyx_leixing: true,
      lyx_arrfenlei: [
        { title: "所有分类" },
        { title: "居家生活" },
        { title: "配件装饰" },
        { title: "新品服装" },
        { title: "日用电器" },
      ],
      lyx_arrweibu: [
        { title: "首页" },
        { title: "分类" },
        { title: "购物车" },
        { title: "个人" },
      ],
    };
  },
  methods: {
    qiehuan1(item) {
      this.lyx_diji = item;
      this.lyx_level = item;
      if (item == 0) {
        this.lyx_leixing = true;
      }
      if (item == 1) {
        this.lyx_leixing = "jujia2";
      }
      if (item == 2) {
        this.lyx_leixing = "peishi";
      }
      if (item == 3) {
        this.lyx_leixing = "fuzhuang2";
      } else if (item == 4) {
        this.lyx_leixing = "dianqi2";
      }
    },
  },
  mounted() {
    axios
      .get("https://api.it120.cc/small4/shop/goods/category/all")
      .then((res) => {
        console.log(res.data.data);
        this.lyx_arr = res.data.data;
        console.log(this.arr);
      });
  },
};
</script>
<style>
footer {
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  border-top: 1px solid #ccc;
  background: #fff;
}
footer span {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 12px;
}
</style>
<style>
.lyx_big {
  height: 100%;
  padding-top: 3rem;
}
/* 主要内容 */
main {
  
  width: 100%;
  border-top: none;
  box-sizing: border-box;
  height: 50rem;
  border: 1px solid #ccc;
  flex: 1;
  display: flex;
}
.lyx_diyigeul {
  width: 25%;
  display: flex;
  flex-direction: column;
  float: left;
  height: 100%;
  margin-top: 10px;
  margin-left: 1px;
}
.lyx_diyigeul li {
  margin-left: 2px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}
.lyx_diergeul {
  width: 75%;
  float: right;
  margin-right: 10px;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #ccc;
  
}
.lyx_diergeul2 li {
  width: 33%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  float: left;
}
.lyx_diergeul2 li img {
  width: 100%;
  height: 75%;
}
.lyx_diergeul li span {
  font-size: 12px;
}
</style>
<style>
/* 头部样式 */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 3rem;
  box-sizing: border-box;
}
header input {
  width: 100%;
  height: 3rem;
  border: 1px solid #ccc;
  outline: none;
  box-sizing: border-box;
  padding-left: 30px;
}
header img {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 30%;
  left: 10px;
}
</style>
<style>
.yanse {
  border-left: 2px solid red !important;
  color: red !important;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
/* 人造换轴 */
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
</style>
